<template>
  <div class="test-tools-page">
    <div class="page-header">
      <h1>测试工具</h1>
      <p>在时间戳和日期的时间格式之间进行转换</p>
    </div>

    <el-row :gutter="20">
      <!-- 时间戳转换工具 -->
      <el-col :span="12">
        <el-card class="tool-card">
          <template #header>
            <div class="card-header">
              <el-icon color="#409EFF"><Clock /></el-icon>
              <span>时间戳转换</span>
            </div>
          </template>
          <div class="tool-content">
            <p class="tool-description">在时间戳和日期的时间格式之间进行转换</p>
            
            <div class="input-section">
              <el-input
                v-model="timestampInput"
                placeholder="请输入时间戳或日期时间"
                class="input-field"
              />
              <el-button type="primary" @click="convertTimestamp">转换</el-button>
            </div>
            
            <div v-if="timestampResult" class="result-section">
              <div class="result-item">
                <label>时间戳：</label>
                <span>{{ timestampResult.timestamp }}</span>
              </div>
              <div class="result-item">
                <label>日期时间：</label>
                <span>{{ timestampResult.datetime }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- URL编码解码工具 -->
      <el-col :span="12">
        <el-card class="tool-card">
          <template #header>
            <div class="card-header">
              <el-icon color="#67C23A"><Link /></el-icon>
              <span>URL编码解码</span>
            </div>
          </template>
          <div class="tool-content">
            <p class="tool-description">URL编码与解码转换工具</p>
            
            <div class="input-section">
              <el-input
                v-model="urlInput"
                placeholder="请输入要编码或解码的URL"
                class="input-field"
              />
              <el-button type="primary" @click="convertUrl">转换</el-button>
            </div>
            
            <div v-if="urlResult" class="result-section">
              <div class="result-item">
                <label>编码结果：</label>
                <span class="result-text">{{ urlResult.encoded }}</span>
              </div>
              <div class="result-item">
                <label>解码结果：</label>
                <span class="result-text">{{ urlResult.decoded }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- JSON格式化工具 -->
      <el-col :span="24">
        <el-card class="tool-card json-card">
          <template #header>
            <div class="card-header">
              <el-icon color="#E6A23C"><Document /></el-icon>
              <span>JSON格式化</span>
            </div>
          </template>
          <div class="tool-content">
            <p class="tool-description">JSON数据格式化和校验工具</p>
            
            <div class="json-section">
              <div class="json-input">
                <label>输入JSON:</label>
                <el-input
                  v-model="jsonInput"
                  type="textarea"
                  :rows="10"
                  placeholder="请输入需要格式化的JSON字符串"
                />
              </div>
              
              <div class="json-actions">
                <el-button type="primary" @click="formatJson">格式化</el-button>
                <el-button @click="compressJson">压缩</el-button>
                <el-button @click="validateJson">校验</el-button>
                <el-button @click="clearJson">清空</el-button>
              </div>
              
              <div class="json-output">
                <label>格式化结果:</label>
                <el-input
                  v-model="jsonOutput"
                  type="textarea"
                  :rows="10"
                  readonly
                  placeholder="格式化结果将在这里显示"
                />
              </div>
            </div>
            
            <div v-if="jsonError" class="error-message">
              <el-alert type="error" :title="jsonError" show-icon />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useToast } from 'vue-toastification'
import dayjs from 'dayjs'

const toast = useToast()

// 时间戳转换
const timestampInput = ref('')
const timestampResult = ref(null)

// URL编码解码
const urlInput = ref('')
const urlResult = ref(null)

// JSON格式化
const jsonInput = ref('')
const jsonOutput = ref('')
const jsonError = ref('')

// 时间戳转换功能
const convertTimestamp = () => {
  if (!timestampInput.value.trim()) {
    toast.error('请输入时间戳或日期时间')
    return
  }

  try {
    const input = timestampInput.value.trim()
    let timestamp, datetime

    // 判断输入是时间戳还是日期时间
    if (/^\d+$/.test(input)) {
      // 输入是时间戳
      timestamp = parseInt(input)
      // 判断是秒级还是毫秒级时间戳
      if (timestamp.toString().length === 10) {
        timestamp = timestamp * 1000
      }
      datetime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
    } else {
      // 输入是日期时间
      const date = dayjs(input)
      if (!date.isValid()) {
        throw new Error('无效的日期格式')
      }
      timestamp = date.valueOf()
      datetime = date.format('YYYY-MM-DD HH:mm:ss')
    }

    timestampResult.value = {
      timestamp: Math.floor(timestamp / 1000), // 返回秒级时间戳
      datetime
    }
  } catch (error) {
    toast.error('转换失败：' + error.message)
  }
}

// URL编码解码功能
const convertUrl = () => {
  if (!urlInput.value.trim()) {
    toast.error('请输入URL')
    return
  }

  try {
    const input = urlInput.value.trim()
    urlResult.value = {
      encoded: encodeURIComponent(input),
      decoded: decodeURIComponent(input)
    }
  } catch (error) {
    toast.error('转换失败：' + error.message)
  }
}

// JSON格式化功能
const formatJson = () => {
  if (!jsonInput.value.trim()) {
    toast.error('请输入JSON字符串')
    return
  }

  try {
    const parsed = JSON.parse(jsonInput.value)
    jsonOutput.value = JSON.stringify(parsed, null, 2)
    jsonError.value = ''
    toast.success('JSON格式化成功')
  } catch (error) {
    jsonError.value = 'JSON格式错误：' + error.message
    jsonOutput.value = ''
  }
}

// JSON压缩功能
const compressJson = () => {
  if (!jsonInput.value.trim()) {
    toast.error('请输入JSON字符串')
    return
  }

  try {
    const parsed = JSON.parse(jsonInput.value)
    jsonOutput.value = JSON.stringify(parsed)
    jsonError.value = ''
    toast.success('JSON压缩成功')
  } catch (error) {
    jsonError.value = 'JSON格式错误：' + error.message
    jsonOutput.value = ''
  }
}

// JSON校验功能
const validateJson = () => {
  if (!jsonInput.value.trim()) {
    toast.error('请输入JSON字符串')
    return
  }

  try {
    JSON.parse(jsonInput.value)
    jsonError.value = ''
    toast.success('JSON格式正确')
  } catch (error) {
    jsonError.value = 'JSON格式错误：' + error.message
  }
}

// 清空JSON
const clearJson = () => {
  jsonInput.value = ''
  jsonOutput.value = ''
  jsonError.value = ''
}
</script>

<style lang="scss" scoped>
.test-tools-page {
  padding: 20px;
}

.tool-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
  }
}

.tool-content {
  .tool-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
  }
  
  .input-section {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    
    .input-field {
      flex: 1;
    }
  }
  
  .result-section {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    
    .result-item {
      display: flex;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      label {
        font-weight: 600;
        min-width: 80px;
        color: #303133;
      }
      
      .result-text {
        word-break: break-all;
        flex: 1;
      }
    }
  }
}

.json-card {
  .json-section {
    .json-input, .json-output {
      margin-bottom: 16px;
      
      label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #303133;
      }
    }
    
    .json-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      justify-content: center;
    }
  }
  
  .error-message {
    margin-top: 16px;
  }
}

.mt-20 {
  margin-top: 20px;
}
</style>